<template>
    <div>
        <city-header></city-header>
        <city-search :cites="citys"></city-search>
        <city-list :cites="citys" :hot="hotcitys" :letter="letter"></city-list>
        <city-alphabet :cites="citys" @change="handleLetterChange"></city-alphabet>
    </div>
</template>

<script>
    import axios from "axios"
    import CityHeader from "./components/Header"
    import CitySearch from "./components/Search"
    import CityList from "./components/List"
    import CityAlphabet from "./components/Alphabet"

    export default{
        name:"City",
        components:{
            CityHeader,
            CitySearch,
            CityList,
            CityAlphabet
        },
        data(){
            return {
                citys:{},             
                hotcitys:[],
                letter:""
            }
        },
        mounted(){
            this.getCityInfo();
        },
        methods:{
            getCityInfo(){
                axios.get('/api/city.json')
                    .then(this.handleGetCityInfoSucc)
            },
            handleGetCityInfoSucc(res){
                res=res.data;
                if(res.ret&&res.data){
                    const data=res.data;
                    this.citys=data.cities;
                    this.hotcitys=data.hotCities;
                }
            },
            handleLetterChange(letter){
                this.letter=letter;

            }
        }
    }
</script>

<style lang="stylus" scoped>

</style>